<template>
  <div class="main">
    <el-card shadow="never" class="content-wrap">
      <Header></Header>
    </el-card>
    <div>
        <div class="languageBox">
          <div class="radioBox">
            <div style="font-size: 20px;">图像识别</div>
            <el-radio-group v-model="radio1" size="large">
              <el-radio-button label="通用物体和场景识别" />
              <el-radio-button label="图像单主体检测" />
              <el-radio-button label="动物识别" />
              <el-radio-button label="植物识别" />
              <el-radio-button label="logo识别" />
              <el-radio-button label="果蔬识别" />
              <el-radio-button label="菜品识别" />
              <el-radio-button label="红酒识别" />
              <el-radio-button label="货币识别" />
              <el-radio-button label="地标识别" />
              <el-radio-button label="图像多主体检测" />
            </el-radio-group>
          </div>
        </div>
      </div>
      <div class="exampleImg" id="label1">
        <div>该请求用于通用物体及场景识别，即对于输入的一张图片（可正常解码，且长宽比适宜），输出图片中的多个物体及场景标签。</div>
      </div>
      <div class="exampleImg" id="label2">
        <div>用户向服务请求检测图像中的主体位置。</div>
      </div>
      <div class="exampleImg" id="label3">
        <div>该请求用于识别一张图片，即对于输入的一张图片（可正常解码，且长宽比较合适），输出动物识别结果。</div>
      </div>
      <div class="exampleImg" id="label4">
        <div>该请求用于识别一张图片，即对于输入的一张图片（可正常解码，且长宽比较合适），输出植物识别结果。</div>
      </div>
      <div class="exampleImg" id="label5">
        <div>该请求用于检测和识别图片中的台标、品牌商标等logo信息。即对于输入的一张图片（可正常解码，且长宽比适宜），输出图片中logo的名称、位置和置信度。</div>
      </div>
      <div class="exampleImg" id="label6">
        <div>该请求用于识别果蔬类食材，即对于输入的一张图片（可正常解码，且长宽比适宜），输出图片中的果蔬食材结果。</div>
      </div>
      <div class="exampleImg" id="label7">
        <div>该请求用于菜品识别。即对于输入的一张图片（可正常解码，且长宽比适宜），输出图片的菜品名称、卡路里信息、置信度。</div>
      </div>
      <div class="exampleImg" id="label8">
        <div>该服务用于识别红酒标签，即对于输入的一张图片（可正常解码，长宽比适宜，且酒标清晰可见），输出图片中的红酒名称、国家、产区、酒庄、类型、糖分、葡萄品种、酒品描述等信息。可识别数十万中外常见红酒。</div>
      </div>
      <div class="exampleImg" id="label9">
        <div>识别图像中的货币类型，以纸币为主，正反面均可准确识别，接口返回货币的名称、代码、面值、年份信息；可识别各类近代常见货币，如美元、欧元、英镑、法郎、澳大利亚元、俄罗斯卢布、日元、韩元、泰铢、印尼卢比等。</div>
      </div>
      <div class="exampleImg" id="label10">
        <div>该请求用于识别地标，即对于输入的一张图片（可正常解码，且长宽比适宜），输出图片中的地标识别结果。</div>
      </div>
      <div class="exampleImg" id="label11">
        <div>检测出图片中多个主体，并给出位置、标签和置信得分。</div>
      </div>
    <div class="putBox">
      <div class="putVoiceBox">
        <div class="putVoice">
          <div class="preview">
            <div>图片预览</div>
            <div class="addmore" style="margin-left: 20px" @click="clearImg">
              <el-icon class="iconClear">
                  <Delete />
              </el-icon>
              <div>清空</div>
            </div>
          </div>
          <div class="getImg" v-show="!imgSrc">
            <el-icon class="icon">
             <List />
            </el-icon>
            <div class="h3">点击添加图片</div>
            <div class="h5">准确率最高97.5%·数据安全保护</div>
            <input id="input2" class="inputVoice" type="file" accept="image/*" @change="inputVoice($event)">
          </div>
          <div class="getImg" v-show="imgSrc">
            <img :src="imgSrc" alt="">
          </div>
          <div class="footerBtn">
            <div class="addmore">
              <el-icon class="iconClear">
                  <Refresh />
              </el-icon>
              <div>识别</div>
            </div>
          </div>
        </div>
      </div>
      <div class="putVoiceBox">
        <div class="putVoice">
          <div class="preview">
            <div>识别结果</div>
          </div>
          <div class="getImg">
            <span>{{ recognitionText }}</span>
          </div>
          <div class="footerBtn">
            <div class="addmore" @click="download">
              <el-icon class="iconClear">
                  <Download />
              </el-icon>
              <div>下载</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

</template>

<script setup lang="ts">
import { ref } from 'vue'
// import func from 'vue-temp/vue-editor-bridge'
const radio1 = ref()
const radio2 = ref()
const radio3 = ref()
const radio4 = ref()
const radio5 = ref()
const imgSrc:any = ref()
const recognitionText = ref('开放蓝天')
onMounted(()=>{ 
  if (sessionStorage.getItem('them') === 'fff') {
    document.documentElement.style.setProperty("--main-shallowbg-color", '#454653')
    document.documentElement.style.setProperty("--main-bg-color", '#22252a')
    document.documentElement.style.setProperty("--main-font-color", '#fff')
    document.documentElement.style.setProperty("--main-shallowfont-color", '#fff')
    document.documentElement.style.setProperty("--main-shallowfont2-color", '#fff')
    document.documentElement.style.setProperty("--el-border-color", '#454653')
    document.documentElement.style.setProperty("--main-elbtn-color", '#454653')
  } else {
    document.documentElement.style.setProperty("--main-shallowbg-color", '#f2f3f4')
    document.documentElement.style.setProperty("--main-bg-color", '#fff')
    document.documentElement.style.setProperty("--main-font-color", '#303133')
    document.documentElement.style.setProperty("--main-shallowfont-color", '#d6d7d8')
    document.documentElement.style.setProperty("--main-shallowfont2-color", 'rgba(0, 0, 0, 0.46)')
    document.documentElement.style.setProperty("--el-border-color", '#dcdfe6')
    document.documentElement.style.setProperty("--main-elbtn-color", '#409eff')
  }
})
// 标题
watch(radio1, (newval:any,oldVal:any) => {
  switch(newval){
    case '通用物体和场景识别':
      setHide(1)
      break;
    case '图像单主体检测':
      setHide(2)
      break;
    case '动物识别':
      setHide(3)
      break;
    case '植物识别':
      setHide(4)
      break;
    case 'logo识别':
      setHide(5)
      break;
    case '果蔬识别':
      setHide(6)
      break;
    case '菜品识别':
      setHide(7)
      break;
    case '红酒识别':
      setHide(8)
      break;
    case '货币识别':
      setHide(9)
      break;
    case '地标识别':
      setHide(10)
      break;
    case '图像多主体检测':
      setHide(11)
      break;
    default:
      break;
  }

})
function setHide(val) {
  for (let i = 1; i < 12; i++) {
    if (i === val) {
      document.getElementById(`label${i}`).style.display = 'block'
    } else {
      document.getElementById(`label${i}`).style.display = 'none'
    }
  }
}

// 选择文件提交
function inputVoice(e) {
  console.log('$event', e.target.files)
  const file = e.target.files[0]
  const reader = new FileReader();
  //为文件读取成功设置事件
  reader.onload=function(val) {
    imgSrc.value = val.target.result
  };
  reader.readAsDataURL(file);
  // let size = e.target.files[0].size/1024/1024
  // let fileObj = {
  //   name: e.target.files[0].name,
  //   size: size.toFixed(2),
  //   type: e.target.files[0].type.split('/')[0]
  // }
  // // console.log('fileObj',fileObj)
  // voiceList.value.push(fileObj)
  // (<HTMLInputElement>document.getElementById('input1')).value
  // (<HTMLInputElement>document.getElementById('input2')).value
}

function clearImg() {
  imgSrc.value = '';
  (<HTMLInputElement>document.getElementById('input2')).value = ''
  // console.log('12',index)
  // voiceList.value.splice(index,1)
}
function download() {
    let a = document.createElement('a')
    a.href = 'data:text/plain;charset=utf-8,' + recognitionText.value
    a.download = '识别结果'
    document.body.appendChild(a)
    a.click()
    document.body.removeChild(a)
}
</script>

<style lang="scss" scoped>
.main {
    min-height: 1500px;
    // padding: 20px;
    background-color: var(--main-shallowbg-color);
}
// .putBox {
//   // width: 90%;
//   // margin: 50px auto;
//   // display: flex;
//   // justify-content: space-around;
// }
.inputVoice {
  opacity: 0.0;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  position: absolute;
}
// .putVoice:hover {
//   box-shadow: 9px 8px 12px var(--main-shallowfont-color);
// }
.putVoiceBox{
  width: 90%;
  height: 420px;
  margin: 10px auto;
}
.putVoice {
  position: relative;
  transition-property: all;
  transition-duration: 0.6s;
  width: 100%;
  height: 400px;
  background-color: var(--main-bg-color);
  color: var(--main-font-color);
  // display: flex;
  // flex-direction: column;
  // justify-content: center;
  // align-items: center;
  border-radius: 10px;
}
.preview {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 10%;
  width: 90%;
  margin: 0px auto;
  font-size: 15px;
}
.getImg {
  position: relative;
  transition-property: all;
  transition-duration: 0.6s;
  width: 90%;
  height: 75%;
  margin: 5px auto 0px;
  background-color: var(--main-bg-color);
  color: var(--main-font-color);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  border: 4px dotted var(--main-shallowbg-color);
  img {
    width: 100%;
    height: 100%;
  }
  .icon {
    font-size: 60px;
    margin-top: -60px;
    margin-bottom: 20px;
    position: relative;
    top: 0px;
    animation-name: example;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-timing-function: linear;
  }
  .h3 {
    font-size: 25px;
    font-weight: 600;
    margin-bottom: 10px;
  }
  .h5 {
    color: #969696;
  }
}
@keyframes example {
  from {top: 0;}
  to {top: 12px;}
}
.addmore {
  transition-property: all;
  transition-duration: 0.5s;
  width: 25%;
  height: 27px;
  border-radius: 10px;
  border: 1px solid;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  .iconClear {
    font-size: 15px;
  }
}
.addmore:hover {
  box-shadow: 3px 3px 4px 1px var(--main-shallowfont-color);
}
.footerBtn {
  width: 90%;
  height: 10%;
  margin: 10px auto;
  display: flex;
  justify-content: flex-end;
  font-size: 15px;
}
.languageBox {
  background-color: var(--main-shallowbg-color);
  // width: 60%;
  // height: 400px;
  padding: 10px;
  color: var(--main-font-color);
}
.radioBox {
  margin-top: 10px;
}
::v-deep .el-radio-group{
  margin: 10px;
}
::v-deep .el-radio-button__inner{
  color: var(--main-font-color);
  background-color: var(--main-bg-color);
}
::v-deep .el-radio-button__original-radio:checked + .el-radio-button__inner {
  color: var(--main-bg-color);
  background-color: var(--main-font-color);
  border: var(--main-font-color);
  box-shadow: none;
}
.exampleImg {
  width: 89%;
  // height: 350px;
  margin: 5px auto;
  div {
    font-size: 15px;
    margin: 5px;
    color: var(--main-font-color);
  }
  img {
    max-width: 100%;
    margin: 5px 0px;
    height: 150px;
  }
}
@media screen and (min-width: 600px) {
  .main {
    min-height: 1500px;
    // padding: 20px;
    background-color: var(--main-shallowbg-color);
}
.putBox {
  width: 95%;
  margin: 0px auto;
  display: flex;
  justify-content: space-around;
}
.inputVoice {
  opacity: 0.0;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  position: absolute;
}
// .putVoice:hover {
//   box-shadow: 9px 8px 12px var(--main-shallowfont-color);
// }
.putVoiceBox{
  width: 40%;
  // height: 400px;
  margin: 10px;
}

.putVoice {
  position: relative;
  transition-property: all;
  transition-duration: 0.6s;
  width: 100%;
  height: 400px;
  background-color: var(--main-bg-color);
  color: var(--main-font-color);
  // display: flex;
  // flex-direction: column;
  // justify-content: center;
  // align-items: center;
  border-radius: 10px;
}
.preview {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 10%;
  width: 90%;
  margin: 0px auto;
  font-size: 17px;
}
.getImg {
  position: relative;
  transition-property: all;
  transition-duration: 0.6s;
  width: 90%;
  height: 76%;
  margin: 0px auto;
  background-color: var(--main-bg-color);
  color: var(--main-font-color);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  border: 4px dotted var(--main-shallowbg-color);
  img {
    width: 100%;
    height: 100%;
  }
  .icon {
    font-size: 60px;
    margin-top: -60px;
    margin-bottom: 20px;
  }
  .h3 {
    font-size: 25px;
    font-weight: 600;
    margin-bottom: 10px;
  }
  .h5 {
    color: #969696;
  }
}
.languageBox {
  background-color: var(--main-shallowbg-color);
  width: 90%;
  margin: 0px auto;
  // height: 400px;
  // padding: 30px 40px 30px 30px;
  color: var(--main-font-color);
}
.radioBox {
  margin: 10px;
}
.addmore {
    width: 18%;
    // height: 35px;
    padding: 1px 10px;
    border-radius: 10px;
    border: 1px solid;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    .iconClear {
      font-size: 20px;
    }
  }
.footerBtn {
  width: 90%;
  height: 10%;
  margin: 10px auto;
  display: flex;
  justify-content: flex-end;
}
.exampleImg {
  width: 89%;
  // height: 350px;
  margin: 5px auto;
  div {
    font-size: 18px;
    margin: 5px;
  }
  img {
    max-width: 100%;
    margin: 15px 0px 10px 25px;
    height: 300px;
  }
}
}
#label1,#label2,#label3,#label4,#label5,#label6,#label7,
#label8,#label9,#label10,#label11{
  display: none;
}
</style>